<script setup>
import router from '@/router/index'
import ShaiuanNav from '@/views/ShaiXuan/components/ShaiXuanNav.vue'
import ShaiXuanBrand from '@/views/ShaiXuan/components/ShaiXuanBrand.vue'
import ShaiXuanCate from '@/views/ShaiXuan/components/ShaiXuanCate.vue'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
const route = useRoute()
const query = route.query
const drawer = ref()
const cateMenu = ref()
const isShowDrawer = ref(false)
const isCateMenu = ref(false)
const brandMenu = ref()
const isBrandMenu = ref(false)
let lastIndex = 0

const onHandlercurrentIndexChanged = (index) => {
  // 无论点击哪一个tab，都应该收起drawer
  if (isShowDrawer.value){
    isShowDrawer.value = false
    drawer.value.style.left = '100%'
  }
  
  // 点击 0,1,2 tab，都应该收起分类，牌子的下拉菜单
  if (index === 0 || index === 1 || index === 2) {
    isCateMenu.value = false
    cateMenu.value.style.bottom = '100%'
    isBrandMenu.value = false
    brandMenu.value.style.bottom = '100%'
    lastIndex = index
    return
  }

  // 点击 分类，需要判断上一次是否也是分类，是则取反先，否则则显示
  if (index === 3){
    if(isBrandMenu.value){
      isBrandMenu.value = false
      brandMenu.value.style.bottom = '100%'
    }
    if (lastIndex === index){
      isCateMenu.value = !isCateMenu.value
      cateMenu.value.style.bottom = isCateMenu.value ? '0%' : '100%'
    }
    else{
      isCateMenu.value = true
      cateMenu.value.style.bottom = '0%'
    }
    lastIndex = index
    return
  }
  
  // 点击 品牌，需要判断上一次是否也是品牌，是则取反先，否则则显示
  if (index === 4) {
    if(isCateMenu.value){
      isCateMenu.value = false
      cateMenu.value.style.bottom = '100%'
    }
    if (lastIndex === index) {
      isBrandMenu.value = !isBrandMenu.value
      brandMenu.value.style.bottom = isBrandMenu.value ? '0%' : '100%'
    }
    else {
      isBrandMenu.value = true
      brandMenu.value.style.bottom = '0%'
    }
    lastIndex = index
    return
  }
}

const onCateCover = ()=>{
  isCateMenu.value = false
  cateMenu.value.style.bottom = '100%'
}
const onBrandCover = ()=>{
  isBrandMenu.value = false
  brandMenu.value.style.bottom = '100%'
}
const routerBack = () => {
  console.log('back')
  router.go(-1)
}
const popDrawerView = () => {
  console.log('右边弹出抽屉view')
  isShowDrawer.value = !isShowDrawer.value
  drawer.value.style.left = isShowDrawer.value ? '0%' : '100%'
}
const gotoSearch = () => {
  console.log('跳转到search')
  router.push('search')
  isShowDrawer.value = false
  drawer.value.style.left = '100%'
}

// 点击筛选遮盖，关闭drawer
const closeDrawer = () => {
  isShowDrawer.value = false
  drawer.value.style.left = '100%'
}

const onItemClick = (item)=>{
  router.push({
    name:'ShopDetail',
    query:{
      id:item
    }
  })
}

const onSelectCateHandler = (list)=>{
  console.log('您选择的是 {' + list + '}')
  onCateCover()
}
</script>

<template>
  <!-- nav -->
  <ShaiuanNav class="nav" @currentIndexChanged="onHandlercurrentIndexChanged" @onLeft="routerBack"
    @onSelect="popDrawerView" @onSearch="gotoSearch" />

  <div class="list">
    <div class="item" v-for="item in 10" :key="item" @click="onItemClick(item)">
      <img class='shop-image' src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" alt="">
      <div class="price">
        <span class="min-price">￥ 2680.00</span>
        <span class="max-price">￥ 6680.00</span>
      </div>
      <div class="name">
        Bonpiont
      </div>
      <span class="zhe">
        7折
      </span>
    </div>
  </div>

  <!-- drawer -->
  <div class="drawer" ref="drawer">
    <div class="drawer-cover" @click="closeDrawer"></div>
    <div class="drawer-menu"></div>
  </div>

  <!-- 分类下拉 -->
  <div class="cate-menu" ref="cateMenu">
    <div class="cate-menu-wrap">
      <ShaiXuanCate @onSelectCate="onSelectCateHandler"/>
    </div>
    <div class="cate-cover" @click="onCateCover"></div>
  </div>

  <!-- 品牌下拉 -->
  <div class="brand-menu" ref="brandMenu">
    <div class="brand-menu-wrap">
      <ShaiXuanBrand />
    </div>
    <div class="brand-cover" @click="onBrandCover"></div>
  </div>
</template>

<style lang="scss" scoped>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 90px;
  width: 100%;
  background-color: #fff;
  display: flex;
  z-index: 999;


}

.list {
  margin-top: 90px;
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 10px;

  .item {
    width: 47%;
    height: 240px;

    .shop-image {
      height: 70%;
    }

    .price {
      width: 100%;

      .min-price {
        width: 50%;
        font-size: 12px;
        color: red;
      }

      .max-price {
        width: 50%;
        font-size: 10px;
        color: #333;
        text-decoration: line-through;
      }
    }

    .name {
      font-size: 12px;
      color: #333;
    }

    .zhe {
      font-size: 12px;
      color: red;
      padding: 3px 5px;
      border: 1px solid red;
      border-radius: 3px;
    }
  }
}

.drawer {
  position: fixed;
  top: 0;
  left: 100%;
  right: 0;
  bottom: 0;
  width: 100%;
  //visibility: hidden;
  transition: 0.3s all;
  //opacity: 0;
  display: flex;
  justify-content: flex-start;
}

.drawer-cover {
  width: 20%;
  background-color: #000;
  opacity: 0.6;
}

.drawer-menu {
  width: 80%;
  background-color: red;
}

.cate-menu {
  position: fixed;
  //top: 0;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100%;
  transition: 0.3s all;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cate-menu-wrap {
  width: 100%;
  background-color: #fff;
}

.cate-cover {
  width: 100%;
  background-color: #000;
  opacity: 0.6;
  flex: 1;
}

.brand-menu {
  position: fixed;
  //top: 0;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100%;
  transition: 0.3s all;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.brand-menu-wrap {
  // TODO: 暂定一个高度，到时依据子div
  height: 65%;
  width: 100%;
  background-color: aqua;
}

.brand-cover {
  width: 100%;
  background-color: #000;
  opacity: 0.6;
  flex: 1;
}</style>